<template>
    <div class="ChatRecordBox">
        <span class="pageName">用户管理 > 聊天记录</span>
        <!-- 搜索框 -->
        <div class="searchBox">
            <div class="searchInp">
                <label for="sendID" style="margin-left:0px">
                    发送ID：
                </label>
                <el-input v-model="sendID" placeholder="请输入发送ID" name="sendID" class="inp"></el-input>

                <label for="sendName">
                    发送昵称：
                </label>
                <el-input v-model="sendName" placeholder="请输入发送昵称" name="sendName" class="inp"></el-input>

                <label for="receiveID">
                    接收ID：
                </label>
                <el-input v-model="receiveID" placeholder="请输入接收ID" name="receiveID" class="inp"></el-input>

                <label for="receiveName">
                    接收昵称：
                </label>
                <el-input v-model="receiveName" placeholder="请输入接收昵称" name="receiveName" class="inp"></el-input>

                <label for="sendContent">
                    内容：
                </label>
                <el-input v-model="sendContent" placeholder="请输入内容" name="sendContent" class="inp"></el-input>

            </div>
            <el-button type="primary" @click="searchData">搜索</el-button>
            <!-- 表格内容删除 -->
            <div class="tableBtn">
                <!-- 删除 -->
                <el-button type="info" @click="delData" :plain="true">删除</el-button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="tableBox">
            <el-table ref="multipleTable"
                :data="chatRecordList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" tooltip-effect="dark"
                @selection-change="handleSelectionChange" border style="width: 98%;font-size: 14px;margin: auto;margin-left: 30px;"
                :header-cell-style="{ background: '#015478', color: '#fff' }">
                <el-table-column type="selection" width="50px" align="center">
                </el-table-column>
                <el-table-column prop="sendId" label="发送ID" align="center">
                </el-table-column>
                <el-table-column prop="sendName" label="发送昵称" align="center">
                </el-table-column>
                <el-table-column prop="sendTime" label="发送时间" align="center" width="160px">
                </el-table-column>
                <el-table-column prop="receiveId" label="接收ID" align="center">
                </el-table-column>
                <el-table-column prop="receiveName" label="接收昵称" align="center">
                </el-table-column>
                <el-table-column prop="sendContent" label="内容" align="center" width="300px">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button @click="del(scope.row)" type="text"
                            style="color: #015478;font-size: 14px">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <pagination :tableData="chatRecordList" @sizeChange="sizeChange" @currentChange="currentChange">
            </pagination>

        </div>
    </div>
</template>

<script>

import pagination from '@/components/pagination/pagination.vue'

export default {
    name: 'ChatRecord',
    components: {
        pagination
    },
    data() {
        return {
            chatRecordList: [],
            currentPage: 1, // 当前页码
            total: '', // 总条数
            pageSize: 8, // 每页的数据条数

            // 输入框内容
            sendID: '',
            sendName: '',
            receiveID: '',
            receiveName: '',
            sendContent: '',

            // 选中内容
            multipleSelection: [],
            // 批量删除
            delSelectionData: [],

        }
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        sizeChange(current, count) {
            this.currentPage = current;
            this.pageSize = count;
        },
        currentChange(current) {
            this.currentPage = current
        },
        // 搜索
        searchData() {
            this.$axios({
                method: 'get',
                url: this.$api.user.chatRecordListSearch,
                params: {
                    sendID: this.sendID,
                    sendName: this.sendName,
                    receiveID: this.receiveID,
                    receiveName: this.receiveName,
                    sendContent: this.sendContent
                }
            })
                .then(res => {
                    this.chatRecordList = res.data;
                    this.sendID = '',
                    this.sendName = '',
                    this.receiveID = '',
                    this.receiveName = '',
                    this.sendContent = ''
                })
                .catch(err => {
                    console.log(err);
                })
        },
        // 批量删除
        delData() {
            if (this.multipleSelection != '') {
                this.multipleSelection.forEach(item => {
                    this.delSelectionData.push(item.sendId)
                })
                this.$confirm('是否继续?', '批量删除信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$axios({
                        method: 'get',
                        url: this.$api.user.delSelectionChatRecord,
                        params: {
                            delSelectionData: this.delSelectionData
                        }
                    })
                        .then(res => {
                            if (res.data == 'success') {
                                this.$axios.get(this.$api.user.chatRecordList)
                                    .then(res => {
                                        this.chatRecordList = res.data;
                                    })
                                    .catch(err => {
                                        console.log(err);
                                    })
                                    this.multipleSelection = []
                                    this.delSelectionData = []
                            } else {
                                console.log('未选中');
                            }
                           
                        })
                        .catch(err => {
                            console.log(err);
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            } else {
                this.$message({
                    showClose: true,
                    message: '请选择需要删除的信息！',
                    type: 'warning'
                })
            }
        },
        // 删除当前选中内容
        del(row) {
            this.$confirm('是否继续?', '删除信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.$axios({
                    method: 'get',
                    url: this.$api.user.delRow,
                    params: {
                        delRow: row.sendId
                    }
                })
                    .then(res => {
                        if (res.data == 'success') {
                            this.$axios.get(this.$api.user.chatRecordList)
                                .then(res => {
                                    this.chatRecordList = res.data;
                                })
                                .catch(err => {
                                    console.log(err);
                                })
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
    },
    created() {
        this.$axios.get(this.$api.user.chatRecordList)
            .then(res => {
                this.chatRecordList = res.data;
            })
            .catch(err => {
                console.log(err);
            })

    }
}
</script>

<style scoped>
.ChatRecordBox {
    display: flex;
    flex-direction: column;
}

.inpBox {
    display: flex;
    padding: 10px 10px;
}

.searchInp {
    width: 100%;
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.inp {
    width: 140px;
}

.tableBtn {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

button {
    height: 40px;
    margin-left: 10px;
}
</style>